<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    按钮创建新vDom修改老vDom,重新渲染列表
    <script>
      // 创建虚拟DOM节点的函数
      function createElement(type, props, ...children) {
        return {
          type,
          props: props || {},
          children: children.flat(),
        };
      }

      // 将虚拟DOM转换为真实DOM的函数
      function render(vnode) {
        // 如果是文本节点,直接创建文本节点
        if (typeof vnode === "string" || typeof vnode === "number") {
          return document.createTextNode(vnode);
        }
        // 创建元素
        const element = document.createElement(vnode.type);
        // 设置属性
        for (let key in vnode.props) {
          element.setAttribute(key, vnode.props[key]);
        }
        // 递归渲染子节点
        vnode.children.forEach((child) => {
          element.appendChild(render(child));
        });
        return element;
      }
      // 使用示例
      // 创建一个函数来更新段落内容
      function updateParagraph() {
        // const p = document.querySelector('p');
        // p.style.color = 'red';
        // p.textContent = '段落内容已更新!';
        // 创建新的虚拟DOM,修改p元素的样式和内容
        const newVDom = createElement(
          "div",
          { class: "container" },
          createElement("h1", null, "虚拟DOM演示"),
          createElement("p", { style: "color: red" }, "段落内容已更新!"),
          createElement(
            "ul",
            null,
            createElement("li", null, "项目1"),
            createElement("li", null, "项目2")
          ),
          createElement("button", { onclick: "updateParagraph()" }, "更新段落")
        );

        // 获取容器元素
        const container = document.querySelector(".container");
        // 清空容器
        container.innerHTML = "";
        // 重新渲染新的虚拟DOM
        container.appendChild(render(newVDom));
      }

      const vDom = createElement(
        "div",
        { class: "container" },
        createElement("h1", null, "虚拟DOM演示"),
        createElement("p", { style: "color: blue" }, "这是一个段落"),
        createElement(
          "ul",
          null,
          createElement("li", null, "项目1"),
          createElement("li", null, "项目2")
        ),
        createElement("button", { onclick: "updateParagraph()" }, "更新段落")
      );
      // 渲染到页面
      const rootElement = render(vDom);
      document.body.appendChild(rootElement);
    </script>
  </body>
</html>
